<template>
  <el-card v-if="userInfo">
    <div slot="header" class="clearfix">个人中心</div>
    <el-form
      ref="_Form"
      :rules="rules"
      :model="userInfo"
      label-width="80px"
      style="width: 500px"
    >
      <el-form-item label="登录名称" prop="username">
        <el-input disabled v-model="userInfo.username" />
      </el-form-item>
      <el-form-item label="用户名称" prop="nickname">
        <el-input v-model="userInfo.nickname" />
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="userInfo.email" />
      </el-form-item>
      <el-form-item>
        <el-row>
          <el-col :offset="4">
            <el-button type="primary" size="mini" @click="sendChange"
              >提交修改</el-button
            >
            <el-button size="mini" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import store from '@/store'
import { userInfoRules } from '@/utils/calidate-Rules'
import { updateUserinfo, getUserInfo } from '@/api/user'
export default {
  data () {
    return {
      userInfo: null,
      rules: userInfoRules
    }
  },
  created () {
    setTimeout(() => {
      this.userInfo = Object.create(store.state.user.userProfile)
      console.log((this.userInfo = store.state.user.userProfile))
    }, 500)
  },
  methods: {
    sendChange () {
      this.$refs._Form.validate((res) => {
        if (res) {
          updateUserinfo(this.userInfo).then((res) => {
            this.$message.success(res.message)
          })
        }
      })
    },
    reset () {
      getUserInfo().then((res) => {
        this.$store.commit('user/changeProfile', res.data)
        this.userInfo = res.data
      })
    }
  }
}
</script>

<style></style>
